<template>
  <nav class="navbar navbar-expand-lg navbar-light" style="background-color: var(--bs-yellow)">
    <div class="container">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="切换导航">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a :href="Home" class="navbar-brand d-flex align-items-center">
        <div>
          <img src="@/assets/logo.jpg" class="rounded-circle" style="width: 3rem" alt="图片加载失败">
        </div>
        <div class="text-center">匠心装饰</div>
      </a>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" :href="Home">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" :href="DesignImage">效果图</a>
          </li>
          <li class="nav-item">
            <a :href="DecorationPlan" class="nav-link">我要装修</a>
          </li>
          <!--            <li class="nav-item dropdown">-->
          <!--              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"-->
          <!--                 aria-expanded="false">服务</a>-->
          <!--              <div class="dropdown-menu" aria-labelledby="navbarDropdown">-->
          <!--                <div><a class="dropdown-item" href="#">服务一</a></div>-->
          <!--                <div><a class="dropdown-item" href="#">服务二</a></div>-->
          <!--                <div>-->
          <!--                  <hr class="dropdown-divider">-->
          <!--                </div>-->
          <!--                <div><a class="dropdown-item" href="#">其他服务</a></div>-->
          <!--              </div>-->
          <!--            </li>-->
          <li class="nav-item">
            <a class="nav-link" :href="AiPlan">AI装修攻略</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" :href="About">关于我们</a>
          </li>
          <li class="nav-item">
            <a :href="admin" class="nav-link">admin</a>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索">
          <button class="btn btn-outline-success" type="submit">搜索</button>
        </form>
      </div>
    </div>
  </nav>
</template>

<script>
import {About, admin, AiPlan, DecorationPlan, DesignImage, Home} from "@/index";
import designImage from "@/views/font/DesignImage.vue";

export default {
  name: "HeaderCmp",
  computed: {
    designImage() {
      return designImage
    }
  },
  data() {
    return {
      Home,
      DesignImage,
      DecorationPlan,
      AiPlan,
      About,
      admin,
    }
  },
}
</script>

<style scoped>
</style>